<template>
  <div class="duoxuan">
    <!-- 学科 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*学科:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-select v-model="single.duoSubject" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <p v-if="single1 && !single.duoSubject">请输入学科</p>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 题干 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*题干:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input v-model="single.duoName" placeholder="请输入内容" @focus="dialogVisible = true"></el-input>
          <el-dialog :visible.sync="dialogVisible" width="60%" class="qed">
            <quillEditor/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
          <p v-if="single1 && !single.duoName">请输入题干</p>
        </div>
      </el-col>
    </el-row>
    <!-- 选项 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*选项:</div>
      </el-col>
      <el-col :span="20">
        <div v-for="(v, i) in form.options" :key="i">
          <el-row>
            <el-col :span="1" class="sel">
              <div>&emsp;{{ form.options[i].code }}</div>
            </el-col>
            <el-col :span="1">
              <div>
                <el-input v-model="form.options[i].code"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-input v-model="text[i]" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div><el-button type="danger" @click="del(i)">删除</el-button></div>
            </el-col>
            <el-col :span="4">
              <div></div>
            </el-col>
            <el-col :span="4">
              <div></div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 标答 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*标答:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-row>
            <el-col :span="3" v-for="(v, q) in form.options" :key="q">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox v-model="radio" :label="q">{{ form.options[q].code }}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 解析 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*解析:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input v-model="single.duoDesc" placeholder="请输入内容"></el-input>
        </div>
        <p v-show="single1 && !single.duoDesc">请输入解析</p>
      </el-col>
    </el-row>
    <!-- 分数 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*分数:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-input-number v-model="single.duoScore" @change="handleChange" :min="1" :max="10"></el-input-number>
        </div>
        <p v-if="!single.duoScore">请输入分数</p>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 难度 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*难度:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-rate v-model="single.duoDifficult"></el-rate>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <div class="but">
      <el-button type="primary" @click="see()">提交</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button type="success" @click="addQuestion">添加选项</el-button>
      <el-button type="success" @click="preview()">预览</el-button>
      <el-dialog title="题目" :visible.sync="centerDialogVisible" width="30%" center>
        <p>{{ single.danName }}</p>
        <span class="da" v-for="(v,i) in text" :key="form.options[i].code">{{ form.options[i].code + text[i]}}</span>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import { demo } from "@/mixin/shimengtong/index.js"
import { multilink } from "@/apis/shimengtong/Index";
import quillEditor from "@/components/shimengtong/QuillEditor.vue"
export default {
  mixins: [demo],
  data() {
    return {
      i: 0,
      form: {
        // 选项
        options: [
          {
            // 选中的A B C D
            code: 'A',
            // input中输入的每个选项
            title: '',
            // 布尔值true或false，选的哪个选项，哪个选项就为true
            isRight: false
          },
          {
            code: 'B',
            title: '',
            isRight: false
          },
          {
            code: 'C',
            title: '',
            isRight: false
          },
          {
            code: 'D',
            title: '',
            isRight: false
          }
        ]
      },
      single: {
        duoSubject: "",//学科
        // duoName: "",//题干
        duoDesc: "",//解析
        duoDifficult: 0,//难度
        duoScore: 0,//分数
      },
      text: {}, //选项
      single1: false,
      dialogVisible: false,
      ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

    }
  },
  updated() {
    console.log(this.single);
  },
  mounted() {
    console.log(this.$refs.myQuillEditor);
  },
  methods: {
    
  handleChange(duoSubject) {
    console.log(duoSubject);
  },
  //非空验证
  see() {
    if (!this.single.duoName) {
      this.duoName1 = true
    }
    if (!this.single.duoSubject) {
      this.duoSubject1 = true
    }
    if (!this.single.duoDesc) {
      this.duoDesc1 = true
    }
    //新增多选
    if (this.single.duoSubject && this.single.duoDesc && this.single.duoScore && this.single.duoDifficult) {
      multilink(this.single, this.text).then((ok) => {
        console.log(this.single);
        console.log(ok);
        this.$message({
        message: "新增试多选成功！",
        type: "success",
      });
      })
    }
  },
  //删除对应项
  del(i) {
    console.log(i);
    this.form.options.splice(i, 1)
  },
  // 随机顺序生成ABCDE...字母的函数
  setDesc() {
    const letterArr = []
    // 字母A的code值是65，但因为已经到字母D了，所以直接从69E开始循环
    for (let i = 69; i < 91; i++) {
      letterArr[i] = String.fromCharCode(i)
    }
    return letterArr
  },
  // 增加选项和答案按钮
  addQuestion() {
    // 调用随机顺序生成ABCDE...字母的函数，可以打印randomAbc 数组看下
    // 有69个元素是空的，所以直接进行了截取
    const randomAbc = this.setDesc().splice(69)
    const res = [
      ...this.form.options,
      {
        code: randomAbc[this.i],
        title: '',
        isRight: false
      }
    ]
    this.i++
    this.form.options = res
  }
},
components: {
  quillEditor
}
};
</script>
  
<style scoped>
.duoxuan {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 20px;
  font-weight: 600;
}

.grid-content {
  text-align: center;
  line-height: 40px;
}

.el-row {
  margin-top: 10px;
}

.el-col {
  margin-right: 10px;
}

.sel {
  text-align: center;
  line-height: 40px;
  margin-left: 50px;
}

.el-rate {
  margin-top: 10px;
}

.but {
  /* margin: 10px,5px,0,20px; */
  margin-top: 30px;
  margin-left: 120px
}

p {
  height: 10px;
  font-size: 12px;
}

/* 不要删 */
.qed>>>.ql-blank {
  height: 300px;
}
</style>